<template>
    <!--个人信息栏-->
   <Row class="bg-black">
       <Col span="12">
           <Row>
               <Col span="5" offset="7">
                   <Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg"  class="avatar" shape="circle"/>
               </Col>
               <Col span="12" class="color-white">
                   <Row class="username"><h1>亚索9527</h1></Row>
                   <Row class="px"><span>男</span><span class="sex">|</span><span>个性签名</span></Row>
                   <Row class="sign"><div>这个人很懒，什么都没有留下!</div></Row>
               </Col>
           </Row>
       </Col>
       <Col span="12" class="color-white detail">
           <Row>
               <Col span="3" >
                   <Row type="flex" justify="center"><h1>9527h</h1></Row>
                   <Row type="flex" justify="center"><h3>学习时长</h3></Row>
               </Col>
               <Col span="2" offset="1">
                   <Row type="flex" justify="center"><h1>9527</h1></Row>
                   <Row type="flex" justify="center"><h3>经验</h3></Row>
               </Col>
               <Col span="2" offset="1">
                   <Row type="flex" justify="center"><h1>9527</h1></Row>
                   <Row type="flex" justify="center"><h3>积分</h3></Row>
               </Col>
               <Col span="2" offset="1">
                   <Row type="flex" justify="center"><h1>9527</h1></Row>
                   <Row type="flex" justify="center"><h3>关注</h3></Row>
               </Col>
               <Col span="2" offset="1">
                   <Row type="flex" justify="center"><h1>9527</h1></Row>
                   <Row type="flex" justify="center"><h3>粉丝</h3></Row>
               </Col>
               <Col span="4" offset="1">
                   <span><div class="smash"><Icon type="gear-b"></Icon>个性设置</div></span>
               </Col>
           </Row>
       </Col>
   </Row>
</template>

<script>
export default {
  name: 'PersonalInfo'
}
</script>

<style scoped>
.bg-black{
    background: #1b1b1b;
    }
.bg{
    background: #348EED;
}
.avatar{
    border-radius: 100%;
    width: 100px;
    height: 100px;
    position: relative;
    top:30px;
}
.color-white{
    color: #cccccc;
}
.username{
    margin-top: 15px;
}
.sex{
    margin:auto 13px;
}
.sign{
    margin: 15px auto;
}
.detail{
    margin-top: 30px;
}
.px{
    font-size: 13px;
}
.smash{
    border-radius: 10px;
    border: 1px solid white;
    text-align: center;
    font-size: 17px;
    font-weight: bold;
    margin-top: 10px;
}
</style>
